<template>
  <div class="fee-pane-header flex items-center" v-if="feeTypeSwitch || slotFeePaneHeader">
    <div class="fee-pane-hedaer-slot" v-if="slotFeePaneHeader">
      <slot name="fee-pane-header"></slot>
    </div>
    <div class="fee-type-switch" v-if="feeTypeSwitch">
      <a-radio-group v-model="feeFormItem.feeType" :disabled="disabledOnlineFee">
        <a-radio :value="1">线下费用</a-radio>
        <a-radio :value="2">线上费用</a-radio>
      </a-radio-group>
    </div>
  </div>
  <div
    class="fee-pane-content flex items-start"
    :class="[!showFeeItemTitle ? 'hide-card-title' : '']"
    v-if="feeFormItem.feeDetailList.length > 0"
  >
    <div class="fee-list flex-1" :class="[feeTypeSwitch ? 'page-form-block' : '']" :style="getFeeListStyle()">
      <a-alert class="a-alert" v-if="isReletOrder">
        <div class="alert-item">若使用系统模板默认的车型价格，可通过车型价格模块进行默认值的配置。</div>
      </a-alert>
      <template v-for="(item, index) in feeFormItem.feeDetailList" :key="item.randomKey">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :feeOption="item" :showDivider="index != feeFormItem.feeDetailList.length - 1"></slot>
        </template>
        <template v-else>
          <template v-if="item.type == 'addServiceFee'">
            <add-service-fee
              :index="index"
              :list="feeFormItem.feeDetailList"
              :showDivider="index != feeFormItem.feeDetailList.length - 1"
            />
          </template>
          <template v-else-if="item.type == 'compensateFee'">
            <compensate-fee :index="index" :list="feeFormItem.feeDetailList" :showDivider="index != feeFormItem.feeDetailList.length - 1" />
          </template>
          <template v-else>
            <generic-fee
              :index="index"
              :list="feeFormItem.feeDetailList"
              :requiredKey="requiredKey"
              :orderFormType="orderFormType"
              :showDivider="index != feeFormItem.feeDetailList.length - 1"
              @viewPriceCalendar="emit('viewPriceCalendar')"
              @feeChange="feeChangeFn"
            />
          </template>
        </template>
      </template>
    </div>
    <div class="fee-statistic" v-if="showStatistic">
      <fee-statistic :prevFeeForm="prevFeeForm" />
    </div>
  </div>
</template>
<script setup>
  import { computed, useSlots, inject } from 'vue'
  import addServiceFee from './fee-list/add-service-fee.vue'
  import genericFee from './fee-list/generic-fee.vue'
  import compensateFee from './fee-list/compensate-fee.vue'
  import feeStatistic from './fee-statistic.vue'
  const props = defineProps({
    orderFeeIndex: {
      type: Number,
      default: 0,
    },
    feeTypeSwitch: {
      type: Boolean,
      default: true,
    },
    showStatistic: {
      type: Boolean,
      default: true,
    },
    showFeeItemTitle: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否是线上订单，影响线上、线下费用的选择
     * 如订单来源为线下订单时，只能选项线下费用
     * 如订单来源为渠道订单时，可选线下费用或线上费用，默认为线下费用
     */
    disabledOnlineFee: {
      type: Boolean,
      default: true,
    },
    prevFeeForm: Object,
    orderFormType: {
      type: String,
      default: '',
    },
    // 是否为下单和续租订单
    isReletOrder: {
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmits(['viewPriceCalendar', 'feeChange'])
  const feeForm = inject('feeForm')
  const feeFormItem = computed(() => {
    return feeForm.value.orderFee[props.orderFeeIndex]
  })
  const feeChangeFn = (feeDetailItem, val, index) => {
    emit('feeChange', feeDetailItem, val, index)
  }
  // 处理 requireKey
  const requiredKey = computed(() => {
    return `orderFee.${props.orderFeeIndex}.feeDetailList.`
  })
  // 是否有 section-header
  const slotFeePaneHeader = !!useSlots()['fee-pane-header']
  // 样式优化
  const getFeeListStyle = () => {
    let feeTypeSwitch = props.feeTypeSwitch
    if (feeTypeSwitch) {
      let feeDetailList = feeFormItem.value.feeDetailList
      if (feeDetailList && feeDetailList.length == 1) {
        let item = feeDetailList[0]
        if (item.type == 'addServiceFee') {
          let childrenList = item.childrenList || []
          if (!childrenList.some((feeDetailItem) => feeDetailItem.statics)) {
            return {
              'padding-bottom': '6px',
            }
          }
        }
      }
    }
    return {}
  }
</script>
<style lang="less" scoped>
  .fee-pane-header {
    .fee-pane-hedaer-slot {
      margin-right: 14px;
    }
  }
  .fee-pane-content {
    width: 100%;
    .fee-statistic {
      width: 420px;
      margin-left: 20px;
    }
  }
  .hide-card-title {
    :deep(.arco-card-header) {
      display: none;
    }
  }
  :deep(.arco-card) {
    background-color: inherit;
  }
  .fee-list.page-form-block {
    :deep(.page-form-block) {
      padding: 0;
      background: transparent;
    }
    :deep(.arco-card) {
      background: transparent;
    }
  }
  .a-alert {
    height: 54px;
    margin-bottom: 20px;
    .alert-item {
      font-size: 14px;
      font-weight: 400;
      color: #1890ff;
    }
  }
</style>
